<template>
  <el-card class="drawer-section">
    <el-tabs v-model="activeTab" type="border-card" @tab-change="handleTabChange">
      <el-tab-pane label="添加人员" name="include">
        <div class="tag-container">
          <el-tag
            v-for="tag in localSelectedTags"
            :key="tag.id"
            :class="tag.type === 'dept' ? 'tag-dept' : 'tag-user'"
            :disable-transitions="false"
            closable
            @close="handleTagClose(tag)"
          >
            {{ tag.name }}
          </el-tag>
        </div>
      </el-tab-pane>

      <el-tab-pane label="排除人员" name="exclude">
        <div class="tag-container">
          <el-tag
            v-for="tag in localExcludedTags"
            :key="tag.id"
            :class="tag.type === 'dept' ? 'tag-dept' : 'tag-user'"
            :disable-transitions="false"
            closable
            @close="handleTagClose(tag)"
          >
            {{ tag.name }}
          </el-tag>
        </div>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue'

interface UserTag {
  id: number
  name: string
  type: 'user' | 'dept'
}

// 定义组件的 props
const props = defineProps<{
  selectedTags: UserTag[]
  excludedTags: UserTag[]
  activeTab: string
}>()

// 定义组件的 emits
const emit = defineEmits<{
  'update:selectedTags': [tags: UserTag[]]
  'update:excludedTags': [tags: UserTag[]]
  'update:activeTab': [tab: string]
  change: [type: 'selected' | 'excluded', tags: UserTag[]]
  tagRemoved: [type: 'selected' | 'excluded', tag: UserTag]
}>()

// 本地数据
const localSelectedTags = ref<UserTag[]>([])
const localExcludedTags = ref<UserTag[]>([])
const activeTab = ref(props.activeTab)

// 初始化数据
onMounted(() => {
  localSelectedTags.value = [...props.selectedTags]
  localExcludedTags.value = [...props.excludedTags]
})

// 监听 props 变化
watch(
  () => props.selectedTags,
  (newVal) => {
    if (JSON.stringify(localSelectedTags.value) !== JSON.stringify(newVal)) {
      localSelectedTags.value = [...newVal]
    }
  },
  { deep: true, immediate: true }
)

watch(
  () => props.excludedTags,
  (newVal) => {
    if (JSON.stringify(localExcludedTags.value) !== JSON.stringify(newVal)) {
      localExcludedTags.value = [...newVal]
    }
  },
  { deep: true, immediate: true }
)

watch(
  () => props.activeTab,
  (newVal) => {
    activeTab.value = newVal
  },
  { immediate: true }
)

// 监听本地数据变化
watch(
  localSelectedTags,
  (newVal) => {
    emit('update:selectedTags', [...newVal])
    emit('change', 'selected', [...newVal])
  },
  { deep: true }
)

watch(
  localExcludedTags,
  (newVal) => {
    emit('update:excludedTags', [...newVal])
    emit('change', 'excluded', [...newVal])
  },
  { deep: true }
)

// 处理标签页切换
const handleTabChange = (tab: string) => {
  emit('update:activeTab', tab)
}

// 处理标签关闭
const handleTagClose = (tag: UserTag) => {
  if (activeTab.value === 'include') {
    localSelectedTags.value = localSelectedTags.value.filter((t) => t.id !== tag.id)
    emit('tagRemoved', 'selected', tag)
  } else {
    localExcludedTags.value = localExcludedTags.value.filter((t) => t.id !== tag.id)
    emit('tagRemoved', 'excluded', tag)
  }
}
</script>

<style scoped>
.drawer-section {
  background-color: var(--el-bg-color);
  border-radius: 4px;
  box-shadow: var(--el-box-shadow-light);
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  max-height: 120px;
  margin-bottom: 8px;
  overflow: hidden;
}

:deep(.el-card__body) {
  padding: 12px;
  height: auto;
  overflow: auto;
}

:deep(.tag-dept) {
  background-color: var(--el-color-success-light-9) !important;
  border-color: var(--el-color-success-light-5) !important;
  color: var(--el-color-success) !important;
}

:deep(.tag-user) {
  background-color: var(--el-color-primary-light-9) !important;
  border-color: var(--el-color-primary-light-5) !important;
  color: var(--el-color-primary) !important;
}

.tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mb-4 {
  margin-bottom: 16px;
}

.w-full {
  width: 100%;
}
</style>
